@use "sass:map";
@use "sass:math";
@import "var-device-width";
//float utils
.clearfix::after{
  content: '';
  display: block;
  clear: both;
}
.float-left{
  float: left;
}
.float-right{
  float: right;
}

//width height
@for $i from 1 through 10 {
  .width-#{$i}0{
    width: #{$i}0#{'%'};
  }
  .max-width-#{$i}0{
    max-width: #{$i}0#{'%'};
  }
  .min-width-#{$i}0{
    min-width: #{$i}0#{'%'};
  }
}
@for $i from 1 through 10 {
  .height-#{$i}0{
    height: #{$i}0#{'%'};
  }
  .max-height-#{$i}0{
    max-height: #{$i}0#{'%'};
  }
  .max-height-#{$i}0{
    min-height: #{$i}0#{'%'};
  }
}

//flex
@for $i from 1 through 12 {
  .flex-#{$i}{
    flex: $i;
  }
}
.flex-row{
  display: flex;
  flex-direction: row;
}
.flex-column{
  display: flex;
  flex-direction: column;
}
.flex-wrap{
  flex-wrap: wrap;
}
.flex-nowrap{
  flex-wrap: nowrap;
}
@media (max-width: $device-width-md) {
  .flex-direction-row-md{
    flex-direction: row !important;
  }
  .flex-direction-column-md{
    flex-direction: column !important;
  }
  .flex-direction-row-reverse-md{
    flex-direction: row-reverse !important;
  }
  .flex-direction-column-reverse-md{
    flex-direction: column-reverse !important;
  }
  @for $i from 1 through 12 {
    .flex-#{$i}-md{
      flex: $i !important;
    }
  }
}
.justify-content-start{
  justify-content: start;
}
.justify-content-end{
  justify-content: end;
}
.justify-content-center{
  justify-content: center;
}
.justify-content-between{
  justify-content: space-between;
}
.align-items-start{
  align-items: start;
}
.align-items-end{
  align-items: end;
}
.align-items-center{
  align-items: center;
}
.align-items-baseline{
  align-items: baseline;
}
.align-items-stretch{
  align-items: stretch;
}
.align-self-start{
  align-self: start;
}

//display
.d-inline{
  display: inline;
}
.d-inline-block{
  display: inline-block;
}
.d-block{
  display: block;
}
.d-none{
  display: none;
}
.d-flex{
  display: flex;
}
@each $size, $width in $device-width-map {
  @media (max-width: $width) {
    .d-none-#{$size} {
      display: none !important;
    }
    .d-block-#{$size} {
      display: block !important;
    }
  }
}
.d-contents{
  display: contents;
}
.position-relative{
  position: relative;
}
.position-absolute{
  position: absolute;
}
.position-sticky{
  position: sticky;
}

//margin and padding
$spacer: 1rem;
$spacers: (
        0: 0,
        1: math.div($spacer,4),
        2: math.div($spacer,2),
        3: $spacer,
        4: $spacer*1.5,
        5: $spacer*3,
);
$margin-and-padding-props: (
        "m": (margin),
        "mt": (margin-top),
        "mb": (margin-bottom),
        "ml": (margin-left),
        "mr": (margin-right),
        "mx": (margin-left, margin-right),
        "my": (margin-top, margin-bottom),
        "p": (padding),
        "pt": (padding-top),
        "pb": (padding-bottom),
        "pl": (padding-left),
        "pr": (padding-right),
        "px": (padding-left, padding-right),
        "py": (padding-top, padding-bottom),
);
@for $i from 0 through 5 {
  @each $key, $props in $margin-and-padding-props {
    .#{$key}-#{$i}{
      $d: map.get($spacers, $i);
      @each $p in $props{
        #{$p}: $d !important;
      }
    }
  }
}
@each $size,$width in $device-width-map{
  @media (max-width: $width) {
    @for $i from 0 through 5 {
      @each $key, $props in $margin-and-padding-props {
        .#{$key}-#{$i}-#{$size}{
          $d: map.get($spacers, $i);
          @each $p in $props{
            #{$p}: $d !important;
          }
        }
      }
    }
  }
}

.list-style-none{
  list-style: none;
  padding: 0;
  margin: 0;
}
